<template>
    <view>
        <view class="tab-list">
                <view v-for="tab in tabList" :key="tab.id" class="tab-item" :class="activeTab === tab.id ? 'tab-selected' : 'not-selected'" @click="onTab(tab.id)">
                    <view class="tab-label">{{ tab.label }}</view>
                </view>
            </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
    let activeTab = ref(0);
    let tabList = ref([
        { label: '报告', id: 0},
        { label: '诊断', id: 1},
    ]);
    function onTab(id){
        activeTab.value = id;
    }
</script>

<style lang="scss" scoped>
  $tab-height: 62px;
    $active-color: #ffffff;
    $default-color: #e2e8f8;
    $primary-color: blue;
  
    .tab-page {
    //   border: 1px solid red;
    }
  
    .tab-list {
      display: flex;
      position: relative;
      z-index: 2;
      border-radius: 12px 12px 0 0;
      background-color: $default-color;
      overflow: hidden; // 重点
  
      .tab-item {
        flex: 1;
        height: $tab-height;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
        color: $primary-color;
        font-weight: 600;
        position: relative;
      }
  
      .tab-icon {
        width: 17px;
        height: 17px;
        margin-right: 4px;
        margin-top: 1px;
      }
  
      .tab-selected {
        opacity: 1;
        background: #ffffff;
        border-radius: 12px 12px 0 0;
        box-shadow: 24px 50px 0 $active-color, -24px 50px 0 0 $active-color; // 重点
  
        .tab-label {
          transform: scale(1.2);
        }
      }
  
      .not-selected {
        color: rgba(0, 0, 255, 0.5);
      }
  
      .tab-selected::before {
        content: '';
        position: absolute;
        left: -6px;
        bottom: 0;
        width: 12px;
        height: $tab-height;
        border-top-left-radius: 12px;
        background-color: $active-color;
        transform: skewX(-15deg); // 重点
      }
  
      .tab-selected::after {
        content: '';
        position: absolute;
        right: -6px;
        bottom: 0;
        width: 12px;
        height: $tab-height;
        border-top-right-radius: 12px;
        background-color: $active-color;
        transform: skewX(15deg); // 重点
      }
  
      .not-selected::before {
        content: '';
        position: absolute;
        left: 6px;
        bottom: 0;
        width: 12px;
        height: $tab-height;
        background: $default-color;
        border-bottom-left-radius: 12px;
        transform: skewX(15deg); // 重点
      }
  
      .not-selected::after {
        content: '';
        position: absolute;
        right: 6px;
        bottom: 0;
        width: 12px;
        height: $tab-height;
        background: $default-color;
        border-bottom-right-radius: 12px;
        transform: skewX(-15deg); // 重点
        z-index: 1;
      }
  
      .tab-label {
        display: inline-block
      }
    }
</style>